
<!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh_cn">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
      <title>4.16.&nbsp;&#22788;&#29702;&#24050;&#28210;&#26579;&#30340;&#39029;&#38754; [&#28145;&#20837;&#27973;&#20986; Greasemonkey]</title>
      <link rel="shortcut icon" href="/favicon.ico">
      <link rel="stylesheet" href="../css/dig.css" type="text/css">
      <meta http-equiv="Link" content='&lt;../css/modern.css&gt;; type="text/css"; rel=stylesheet, &lt;../css/empty.css&gt;; type="text/css";
      rel=stylesheet'>
      <link rev="made" href="mailto:mark@diveintomark.org">
      <meta name="generator" content="DocBook XSL Stylesheets V1.68.1">
      <meta name="keywords" content="Firefox, Greasemonkey, Javascript, user script, userscript">
      <link rel="start" href="../toc/index.html" title="&#28145;&#20837;&#27973;&#20986; Greasemonkey">
      <link rel="up" href="index.html" title="&#31532;&nbsp;4&nbsp;&#31456;&nbsp;&#20844;&#20849;&#27169;&#24335;">
      <link rel="prev" href="set-style.html" title="4.15.&nbsp;&#35774;&#32622;&#20803;&#32032;&#26679;&#24335;">
      <link rel="next" href="case-insensitive.html" title="4.17.&nbsp;&#21305;&#37197;&#22823;&#23567;&#20889;&#26080;&#20851;&#30340;&#23646;&#24615;&#20540;">
   </head>
   <body id="diveintogreasemonkey-org" class="pattern-postprocess">
      <div class="z" id="intro">
         <div class="sectionInner">
            <div class="sectionInner2">
               <div class="s">
                  <h1><a href="/" accesskey="1">&#28145;&#20837;&#27973;&#20986; Greasemonkey</a></h1>
                  <p>&#25945;&#32769;&#32593;&#32476;&#23398;&#26032;&#25226;&#25103;</p>
               </div>
               <div class="s">
                  <ul>
                     <li><a href="../">&#36215;&#22987;&#39029;</a> &middot; 
                     </li>
                     <li><a href="../toc/">&#30446;&#24405;</a> &middot; 
                     </li>
                     <li><a href="../download/">&#19979;&#36733;</a> &middot; 
                     </li>
                     <li><a href="http://greasemonkey.mozdev.org/">&#31435;&#21363;&#19979;&#36733; Greasemonkey</a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <div id="main">
         <div id="mainInner">
            <p id="breadcrumb">&#24744;&#30340;&#20301;&#32622;&#65306;<a href="../">&#36215;&#22987;&#39029;</a> &#8594; <a href="../toc/index.html">&#30446;&#24405;</a> &#8594; <a href="index.html">&#20844;&#20849;&#27169;&#24335;</a> &#8594; <span class="thispage">&#22788;&#29702;&#24050;&#28210;&#26579;&#30340;&#39029;&#38754;</span></p>
            <div class="section" lang="zh_cn">
               <div class="titlepage">
                  <div>
                     <div>
                        <h2 class="title"><a name="pattern.postprocess" class="skip" href="#pattern.postprocess" title="link to this section"><img src="../images/permalink.gif" alt="[link]" title="link to this section" width="8" height="9"></a> 4.16.&nbsp;&#22788;&#29702;&#24050;&#28210;&#26579;&#30340;&#39029;&#38754;
                        </h2>
                     </div>
                     <div>
                        <div class="abstract">
                           <h3 class="title"></h3>
                           <p>&#30001;&#20110; Firefox &#20445;&#23384;&#24050;&#28210;&#26579;&#39029;&#38754;&#30340;&#20869;&#22312;&#26041;&#24335;&#65292;&#24212;&#35813;&#22312;&#39029;&#38754;&#21152;&#36733;&#23436;&#25104;<span class="emphasis"><em>&#20197;&#21518;</em></span>&#65292;&#25165;&#33021;&#23545;&#39029;&#38754;&#19978;&#30340; DOM &#20570;&#20986;&#22823;&#35268;&#27169;&#30340;&#25913;&#21160;&#65292;&#37027;&#20040;&#36825;&#20010;&#25805;&#20316;&#24212;&#35813;&#21457;&#29983;&#22312;&#39029;&#38754;&#23436;&#25104;&#36733;&#20837;&#20043;&#21518;&#65292;&#36825;&#26159;&#30001;&#24050;&#25191;&#34892;&#39029;&#38754;&#22312; Firefox &#20869;&#30340;&#23384;&#20648;&#26041;&#24335;&#20915;&#23450;&#30340;&#12290;&#24744;&#21487;&#20197;&#29992; <code class="function">addEventListener</code> &#20989;&#25968;&#26469;&#24310;&#36831;&#20989;&#25968;&#30340;&#25191;&#34892;&#12290;
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="example"><a name="example.pattern.addeventlistener" class="skip" href="#example.pattern.addeventlistener" title="link to this example"><img src="../images/permalink.gif" alt="[link]" title="link to this example" width="8" height="9"></a> 
                  <h3 class="title">&#20363;&nbsp;4.20.&nbsp;&#26367;&#25442;&#20840;&#37096;&#39029;&#38754;&#20026;&#33258;&#23450;&#20041;&#30340;&#20869;&#23481;</h3><pre class="programlisting ">var newBody = 
'&lt;html&gt;' +
'&lt;head&gt;' +
'&lt;title&gt;My New Page&lt;/title&gt;' +
'&lt;/head&gt;' +
'&lt;body&gt;' +
'&lt;p&gt;This page is a complete replacement of the original.&lt;/p&gt;' +
'&lt;/body&gt;' +
'&lt;/html&gt;';
window.addEventListener(
	'load', 
	function() { document.body.innerHTML = newBody; },
	true);</pre></div>
               <p>&#20180;&#32454;&#30475;&#36825;&#27573;&#20195;&#30721;&#65292;&#24744;&#21487;&#33021;&#33258;&#28982;&#22320;&#24819;&#30693;&#36947;&#23427;&#26159;&#24590;&#20040;&#25191;&#34892;&#30340;&#12290;&#25105;&#22768;&#26126;&#20102;&#19968;&#20010;&#21311;&#21517;&#20989;&#25968;&#26469;&#20570;&#20026; <code class="methodname">window.addEventListener</code> &#30340;&#31532;&#20108;&#20010;&#21442;&#25968;&#20256;&#20837;&#65292;&#23427;&#35775;&#38382;&#20102;&#22312;&#36825;&#20010;&#20989;&#25968;&#22806;&#23450;&#20041;&#30340;&#21464;&#37327; <code class="varname">newBody</code>&#12290;&#36825;&#31181;&#26041;&#27861;&#31216;&#20026; &#8220;<span class="quote">&#38381;&#21253;(closure)</span>&#8221;&#65292; &#22312; Javascript &#20013;&#26159;&#23436;&#20840;&#26377;&#25928;&#30340;&#12290;&#19968;&#33324;&#35828;&#26469;&#65292;&#22312;&#8220;<span class="quote">&#22806;&#23618;</span>&#8221;&#20989;&#25968;&#20013;&#23450;&#20041;&#30340;&#8220;<span class="quote">&#20869;&#23618;</span>&#8221;&#20989;&#25968;&#21487;&#20197;&#35775;&#38382;&#22806;&#23618;&#20989;&#25968;&#30340;&#25152;&#26377;&#23616;&#37096;&#21464;&#37327; -- &#29978;&#33267;&#22312;&#22806;&#23618;&#20989;&#25968;&#25191;&#34892;&#32467;&#26463;&#20197;&#21518;&#12290;&#36825;&#26159;&#19968;&#20010;&#24456;&#26377;&#29992;&#30340;&#29305;&#24615;&#65292;&#21487;&#20197;&#36890;&#36807;&#23427;&#26469;&#21019;&#24314;&#20107;&#20214;&#21477;&#26564;&#21644;&#29992;&#26469;&#22312;&#36816;&#34892;&#26102;&#24314;&#31435;&#30340;&#25968;&#25454;&#26500;&#26550;&#30340;&#20854;&#20182;&#20989;&#25968;&#12290;
               </p>
               <div class="tip">
                  <table class="admon" summary="">
                     <tr>
                        <td class="admonicon"><a href="../appendix/tips.html" title="&#25216;&#24039;&#28165;&#21333;"><img alt="[&#25552;&#31034;]" src="../images/tip.png" width="24" height="24" title=""></a></td>
                        <td class="admontext">
                           <p>&#21024;&#38500;&#21644;&#26367;&#25442; <code class="property">document.body.innerHTML</code> &#24182;&#19981;&#20250;&#26356;&#25913;&#39029;&#38754;&#12290;&#21407;&#39029;&#38754;&#22312; <code class="sgmltag-element">&lt;head&gt;</code> &#20013;&#23450;&#20041;&#30340;&#25152;&#26377;&#20869;&#23481;&#20173;&#28982;&#26159;&#26377;&#25928;&#30340;&#65292;&#21253;&#25324;&#39029;&#38754;&#30340;&#26631;&#39064;&#65292;CSS &#26679;&#24335;&#65292;&#20197;&#21450;&#33050;&#26412;&#12290;&#21487;&#20197;&#20998;&#24320;&#20462;&#25913;&#25110;&#32773;&#31227;&#38500;&#12290;
                           </p>
                        </td>
                     </tr>
                  </table>
               </div>
               <div class="usedby">
                  <h3>&#23454;&#20363;</h3>
                  <ul>
                     <li>
                        <a href="http://www.firefox.net.cn/dig/download/accessbar.user.js">Access Bar</a>
                        
                     </li>
                     <li>
                        <a href="http://www.firefox.net.cn/dig/download/betterdir.user.js">BetterDir</a>
                        
                     </li>
                  </ul>
               </div>
            </div>
            <div style="float: left">&#8592;&nbsp;<a class="NavigationArrow" href="set-style.html">&#35774;&#32622;&#20803;&#32032;&#26679;&#24335;</a></div>
            <div style="text-align: right"><a class="NavigationArrow" href="case-insensitive.html">&#21305;&#37197;&#22823;&#23567;&#20889;&#26080;&#20851;&#30340;&#23646;&#24615;&#20540;</a>&nbsp;&#8594;
            </div>
            <hr style="clear:both">
            <div class="footer">
               <p class="copyright">&#29256;&#26435; &copy; 2005 Mark Pilgrim &middot; <a title="&#21457;&#36865;&#32473;&#25105;&#26377;&#20110;&#27492;&#20070;&#30340;&#21453;&#39304;&#24847;&#35265;" href="mailto:mark@diveintomark.org">mark@diveintomark.org</a> &middot; <a href="../license/gpl.html" title="GNU &#36890;&#29992;&#20844;&#20849;&#35768;&#21487;&#35777;">&#20351;&#29992;&#26465;&#27454;</a></p>
            </div>
         </div>
      </div>
   </body>
</html>